<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>第九师水利工程一张图</title>
    <!--    引入各类样式-->
    <link href="openlayers/ol.css" rel="stylesheet">
    <link href="superMap_for_openlayers/iclient-ol.css" rel="stylesheet">
    <link href="layui/css/layui.css" rel="stylesheet">
    <link href="/css/xadmin.css" rel="stylesheet">
    <link href="fontawesome/font-awesome.min.css" rel="stylesheet">
    <link href="/css/font.css" rel="stylesheet">
    <link rel="stylesheet" href="css/reset.css">
    <link href="css/video-js.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <style>
        .tooltip {
            position: relative;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            color: white;
            padding: 4px 8px;
            opacity: 0.7;
            white-space: nowrap;
        }
        .tooltip-measure {
            opacity: 1;
            font-weight: bold;
        }
        .tooltip-static {
            background-color: #ffcc33;
            color: black;
            border: 1px solid white;
            border-radius: 9px;
            font-size: 13px;
        }
        .tooltip-measure:before,
        .tooltip-static:before {
            border-top: 6px solid rgba(0, 0, 0, 0.5);
            border-right: 6px solid transparent;
            border-left: 6px solid transparent;
            content: "";
            position: absolute;
            bottom: -6px;
            margin-left: -7px;
            left: 50%;

        }
        .tooltip-static:before {
            border-top-color: #ffcc33;
        }
        .ol-popup {
            position: absolute;
            background-color: #000a3f80;
            color:white;
            border: 1px solid #28e5e9;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            padding: 15px;
            border-radius: 10px;
            bottom: 12px;
            left: -50px;
            min-width: 200px;
        }
        .ol-popup:after, .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
        .ol-popup:after {
            border-top-color: #28e5e9;

            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }
        .ol-popup:before {

            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }
        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
            color: white;
        }
        .ol-popup-closer:after {
            content: "✖";
        }
        #popup-content p{
            margin-bottom: 5px;
        }
        ::-webkit-scrollbar{
            width:0;
        }
        .left-nav{
            background-color: #ffffff;
            border-right: 1px solid #dcdcdc;
            top:0px;
            padding-top:0px;
        }

        .left-nav a.active {
             border-bottom: 0;
             border-top: 0;
             border-right: 0;
             border-left: 0;
        }
        .env_information tr{
            height: 39.8px;
        }
        .env_information img{
            margin-top: 5px;
        }
        .plant>li {
            width: 11.5%;
            height: 100%;
        }

    </style>
</head>

<!-- 黄瑶 -->


<body>
<div class="main">
    <div class="nav">第九师水利工程监管系统</div>
    <div class="nav_btn">
        <div class="btn_left" >
            <a href="projectInfo.html" style="margin-right: 78px;">
                <div class="btn_list" ><p style="margin-left: 20px;">流域一张图</p></div>
            </a>
            <a href="real_time_monitor.html" style="margin-right: 30px;">
                <div class="btn_list listActive" ><p style="margin-left: 28px;">实时监测</p></div>
            </a>
        </div>
        <div class="btn_right" >
            <a href="fillout_data.html" style="margin-right: 85px;">
                <div class="btn_list" ><p style="margin-left: 28px;">数据填报</p></div>
            </a>
            <a href="system_set.html" style="margin-right: 30px;">
                <div class="btn_list" ><p style="margin-left: 26px;">系统管理</p></div>
            </a>

        </div>
    </div>
    <div class="content layui-anim layui-anim-scale"  style="width: 100%;background:white;height: 90%;">
        <!-- 左侧菜单开始 -->
        <div class="left-nav">
            <div id="side-nav">
                <ul id="nav">
                    <li>
                        <a href="javascript:;">
                            <i class="iconfont left-nav-li" >&#xe704;</i>
                            <cite>雨水情信息</cite>
                            <i class="iconfont nav_right">&#xe697;</i>
                        </a>
                        <ul class="sub-menu">
                            <li>
                                <a >
                                    <i class="iconfont">&#xe6a7;</i>
                                    <cite id="real_rain_information">实时雨情</cite>
                                </a>
                            </li>
                            <li>
                                <a >
                                    <i class="iconfont">&#xe6a7;</i>
                                    <cite>河道水情</cite>
                                </a>
                            </li>
                            <li>
                                <a >
                                    <i class="iconfont">&#xe6a7;</i>
                                    <cite>水库水情</cite>
                                </a>
                            </li>
                            <li>
                                <a >
                                    <i class="iconfont">&#xe6a7;</i>
                                    <cite>水库极值</cite>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <i class="iconfont left-nav-li" >&#xe713;</i>
                            <cite>预警信息</cite>
                            <i class="iconfont nav_right">&#xe697;</i>
                        </a>
                        <ul class="sub-menu">
                            <li>
                                <a >
                                    <i class="iconfont">&#xe6a7;</i>
                                    <cite>水库预警</cite>
                                </a>
                            </li>
                            <li>
                                <a >
                                    <i class="iconfont">&#xe6a7;</i>
                                    <cite>河道预警</cite>
                                </a>
                            </li>
                            <li>
                                <a >
                                    <i class="iconfont">&#xe6a7;</i>
                                    <cite>雨情预警</cite>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <i class="iconfont left-nav-li" >&#xe6f6;</i>
                            <cite>运行日报</cite>
                            <i class="iconfont nav_right">&#xe697;</i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 左侧菜单结束 -->
        <!-- 右侧内容开始-->
        <div class="layui-fluid" style="background-color: #cccccc;width: 88.5%;margin-left: 11.5%;height: 100%;padding: 0;">
            <div class="layui-card" style="height: 100%;">
                <div class="layui-card-header dev_water_info_1" style="padding: 10px;">
                    <form class="layui-form" action="" style="padding-left: 16px;">
                        <div class="layui-form-item">
                            站点选择：
                            <div style="display: inline-block;width: 12%;margin-right: 20px;" >
                                <select name="city" lay-verify="" lay-search>
                                    <option value="010">请选择一个站点</option>
                                    <option value="010">layer</option>
                                    <option value="021">form</option>
                                    <option value="0571">layim</option>
                                </select>
                            </div>
                            开始时间：
                            <div style="display: inline-block;width: 9%;margin-right: 20px;" >
                                <input type="text" style="display: inline-block;" class="layui-input" id="start_date">
                            </div>
                            结束时间：
                            <div style="display: inline-block;width: 9%;margin-right: 20px;" >
                                <input type="text" style="display: inline-block;" class="layui-input" id="end_date">
                            </div>
                            <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" style="padding: 0 14px;height: 36px;line-height: 0;margin-left: 10%;"><i class="layui-icon">&#xe615;</i>   查询</button>
                            <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" style="padding: 0 14px;height: 36px;line-height: 0;"><i class="layui-icon">&#xe601;</i>   导出</button>
                        </div>
                    </form>

                </div>
                <div class="layui-card-body " style="height: 90%;">
                    <div class="layui-row" style="height: 790px;">
                        <div class="layui-col-md12" id="real_time_chart" style="height: 360px;">

                        </div>
                        <div class="layui-col-md12" style="overflow: scroll;overflow-x: hidden; overflow-y: auto;height: 411px;">
                            <table class="layui-table" lay-even style="margin: 0px;">
                                <colgroup>
                                    <col width="80">
                                    <col width="300">
                                    <col width="300">
                                    <col width="300">
                                    <col >
                                </colgroup>
                                <thead>
                                <tr style="background-color: #5FB878;color: white;">
                                    <th colspan="5" style="height: 40px;text-align: center;font-size: 19px;">请选择一个站点</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>序号</td>
                                    <td>时间</td>
                                    <td>雨量(mm)</td>
                                    <td>累计雨量(mm)</td>
                                    <td>超预警</td>
                                </tr>
                                <tr>
                                    <th>1</th>
                                    <td>2021-12-01</td>
                                    <td>163</td>
                                    <td>215</td>
                                    <td>否</td>
                                </tr>
                                <tr>
                                    <th>1</th>
                                    <td>2021-12-01</td>
                                    <td>163</td>
                                    <td>215</td>
                                    <td>否</td>
                                </tr><tr>
                                    <th>1</th>
                                    <td>2021-12-01</td>
                                    <td>163</td>
                                    <td>215</td>
                                    <td>否</td>
                                </tr>
                                <tr>
                                    <th>1</th>
                                    <td>2021-12-01</td>
                                    <td>163</td>
                                    <td>215</td>
                                    <td>否</td>
                                </tr>
                                <tr>
                                    <th>1</th>
                                    <td>2021-12-01</td>
                                    <td>163</td>
                                    <td>215</td>
                                    <td>否</td>
                                </tr><tr>
                                    <th>1</th>
                                    <td>2021-12-01</td>
                                    <td>163</td>
                                    <td>215</td>
                                    <td>否</td>
                                </tr><tr>
                                    <th>1</th>
                                    <td>2021-12-01</td>
                                    <td>163</td>
                                    <td>215</td>
                                    <td>否</td>
                                </tr>
                                <tr>
                                    <th>1</th>
                                    <td>2021-12-01</td>
                                    <td>163</td>
                                    <td>215</td>
                                    <td>否</td>
                                </tr>
                                <tr>
                                    <th>1</th>
                                    <td>2021-12-01</td>
                                    <td>163</td>
                                    <td>215</td>
                                    <td>否</td>
                                </tr>
                                <tr>
                                    <th>1</th>
                                    <td>2021-12-01</td>
                                    <td>163</td>
                                    <td>215</td>
                                    <td>否</td>
                                </tr>
                                <tr>
                                    <th>1</th>
                                    <td>2021-12-01</td>
                                    <td>163</td>
                                    <td>215</td>
                                    <td>否</td>
                                </tr>
                                <tr>
                                    <th>1</th>
                                    <td>2021-12-01</td>
                                    <td>163</td>
                                    <td>215</td>
                                    <td>否</td>
                                </tr>
                                <tr>
                                    <th>1</th>
                                    <td>2021-12-01</td>
                                    <td>163</td>
                                    <td>215</td>
                                    <td>否</td>
                                </tr><tr>
                                    <th>1</th>
                                    <td>2021-12-01</td>
                                    <td>163</td>
                                    <td>215</td>
                                    <td>否</td>
                                </tr>
                                <tr>
                                    <th>1</th>
                                    <td>2021-12-01</td>
                                    <td>163</td>
                                    <td>215</td>
                                    <td>否</td>
                                </tr>
                                <tr>
                                    <th>1</th>
                                    <td>2021-12-01</td>
                                    <td>163</td>
                                    <td>215</td>
                                    <td>否</td>
                                </tr>
                                <tr>
                                    <th>1</th>
                                    <td>2021-12-01</td>
                                    <td>163</td>
                                    <td>215</td>
                                    <td>否</td>
                                </tr>
                                <tr>
                                    <th>1</th>
                                    <td>2021-12-01</td>
                                    <td>163</td>
                                    <td>215</td>
                                    <td>否</td>
                                </tr>







                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>

        </div>
        <!-- 右侧内容结束-->
    </div>
</div>





<!--引入各类函数-->
<!--    <script src="js/video.js"></script>-->
<!--    <script src="js/videojs-contrib-hls.min.js" type="text/javascript"></script>-->
<script src="openlayers/ol.js"></script>
<script type="text/javascript"  src="superMap_for_openlayers/iclient-ol.js"></script>
<script type="text/javascript"  src="superMap_for_openlayers/include-web.js"></script>
<script src="layui/layui.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/xadmin.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/dataScoll.js"></script>
<script src="js/public.js"></script>
<script src="js/real_time_monitor.js"></script>





</body>

</html>

